<template>
  <div class="app-container">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
        <el-form-item label="活动名称" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
     <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>

    </el-form>
  </div>
</template>

<script>

export default {
  
  data() {
    return {
      ruleForm: {
        name: "",
        phone:"",
     
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        //  phone: [
        //   { required: true, message: "手机号格式不正确", trigger: "blur" },
        //   {   required: true,
        //   pattern: /^1[3456789]\d{9}$/,
        //   message: '手机号格式不正确',
        //   trigger: 'blur' }
        // ],
         phone: [{ required: true, validator: this.checkphone, trigger: "blur" }],
       
       
      }
    };
  },
  created(){
    this.changeData()
  },
  methods: {
     nameReplace(val) {
      return val && val.replace('支行', '')
    },
    changeData(){
      let data=[
        {
          name:"北京支行",
          id:"1"
        },
         {
          name:"上海支行",
          id:"2"
        }
      ]

     let dataOne= data.map((item)=>{
        return {
              name:this.nameReplace(item.name ),
              id:item.id
        }
      })
      console.log(dataOne)
      return dataOne

    },
    checkphone(rule, value, callback){
		      // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
		      if (value == "") {
		        callback(new Error("请输入手机号"));
		      } else if (!this.isCellPhone(value)) {//引入methods中封装的检查手机格式的方法
		        callback(new Error("请输入正确的手机号!"));
		      } else {
		        callback();
		      }
		},
    isCellPhone(val) {
	      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
	        return false;
	      } else {
	        return true;
	      }
	    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      // this.$refs[formName].resetFields();
       this.$refs.ruleForm.resetFields();
    }
  }
};
</script>